<!DOCTYPE html>
<html lang="zh-cn" >
<head>
    <title>数据交换单元状态日志</title>
    <#include "../../../__ref_common.ftl" parse=true/>
    <link rel="stylesheet" href="${mvcPath}/dacp-view/datastash/workshop/unit_state/css/common.css">
</head>
<body>
<div id="main" >
    <elx-main split-type="row">
        <elx-header>
            <el-form :model="taskStateLogFilter" :inline="true">
                <el-form-item  label="任务订单号" >
                    <el-input v-model="taskStateLogFilter.taskProcId" placeholder="请填写任务订单号"></el-input>
                </el-form-item>
                <el-form-item  label="处理单元" >
                    <el-input v-model="taskStateLogFilter.unitCode" placeholder="请填写处理单元"></el-input>
                </el-form-item>
                <el-form-item  label="批次" >
                    <el-input v-model="taskStateLogFilter.batchNo" placeholder="请填写批次"></el-input>
                </el-form-item>
                <el-form-item  label="是否翻牌" >
                    <el-select v-model="taskStateLogFilter.isTurnover"  >
                        <el-option v-for="item in turnOverEnum" :label="item.label" :value="item.value"></el-option>
                    </el-select >
                </el-form-item>
                </el-form-item>
                <el-form-item  label="状态" >
                    <el-select v-model="taskStateLogFilter.state"  >
                        <el-option v-for="item in stateEnum" :label="item.label" :value="item.value"></el-option>
                    </el-select >
                </el-form-item>
                <el-form-item class="button-group">
                    <el-button type="info" icon="search" @click.native="getTaskStateLog">查询</el-button>
                </el-form-item>
            </el-form>
        </elx-header>
        <elx-scroll-content ref="scrollContent" @resize="scrollContentResize">
	        <el-table class="form-content" :data="taskStateLog" border :height="tableHeight" style="width:100%" @expand="expand">
                <el-table-column label="任务流水" prop="taskProcId" width="88px" show-overflow-tooltip></el-table-column>
                <el-table-column label="处理单元" prop="unitCode" show-overflow-tooltip></el-table-column>
                <el-table-column label="批次" prop="batchNo" width="80px" show-overflow-tooltip></el-table-column>
                <el-table-column label="引擎类型" prop="taskType" show-overflow-tooltip></el-table-column>
                <el-table-column label="分片信息" prop="taskContent" show-overflow-tooltip></el-table-column>
                <el-table-column label="broker编号" prop="brokerId" width="88px" show-overflow-tooltip></el-table-column>
                <el-table-column label="brokerIP" prop="brokerIp" show-overflow-tooltip></el-table-column>
                <el-table-column label="创建时间" prop="createDate" show-overflow-tooltip></el-table-column>
                <el-table-column label="状态" prop="state" width="60" :formatter="stateFormatter" show-overflow-tooltip></el-table-column>
                <el-table-column label="执行信息" prop="message" show-overflow-tooltip></el-table-column>
                <el-table-column type="expand">
			        <template scope="scope">
			            <el-table :data="scope.row.taskEventLog" border style="width:100%">
                            <el-table-column  type="index"   width="50">  </el-table-column>
                            <el-table-column label="broker编号" prop="brokerId" width="150px" show-overflow-tooltip></el-table-column>
                            <el-table-column label="brokerIP" prop="brokerIp" width="150px"show-overflow-tooltip></el-table-column>
                            <el-table-column label="创建时间" prop="createDate"  width="150" show-overflow-tooltip></el-table-column>
		                    <el-table-column label="状态" prop="state" width="100" :formatter="stateFormatter" show-overflow-tooltip></el-table-column>
		                    <el-table-column label="执行信息" prop="message" show-overflow-tooltip></el-table-column>
		                </el-table>
			        </template>
			    </el-table-column>
            </el-table>
        </elx-scroll-content>
        <elx-footer v-show="taskStateLogFilter.total>taskStateLogFilter.pageSize">
            <div class="pagination-container">
	             <el-pagination
	                    @current-change="handleCurrentChange"
	                    :page-size="taskStateLogFilter.pageSize"
	                    layout="total, prev, pager, next, jumper"
	                    :current-page="taskStateLogFilter.pageNum"
	                    :total="taskStateLogFilter.total">
	             </el-pagination>
	         </div>
        </elx-footer>
    </elx-main>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#main',
        data: function () {
            return {
            	unitProcId:'${unitProcId!''}',
            	type: 'list',
            	loading: false,
            	tableHeight: 0,
            	formLabelWidth: '120px',
            	origin: window.location.origin,
            	src:  _contextPath + '/datastash/workshop/task/state',
                taskStateLog: [],
                taskStateLogFilter: {
                	unitProcId: '${unitProcId!''}',
                	taskProcId: '',
                    unitCode: '',
                    batchNo: '',
                    isTurnover: '',
                    state: '',
                	pageNum: 1,
                    pageSize: 50,
                    total: 0
                },
                taskTypeEnum:[
                    {label:"dp",value:"dp"},
                    {label:"stream",value:"stream"},
                    {label:"datax",value:"datax"}
                ],
                turnOverEnum:[
                    {label: '不翻', value: '0'},
                    {label: '翻', value: '1'}
                ],
                stateEnum:[
                    {label: '新建', value: '1'},
                    {label: '可运行', value: '2'},
                    {label: '正在运行', value: '3'},
                    {label: '资源阻塞', value: '4'},
                    {label: '依赖阻塞', value: '5'},
                    {label: '成功', value: '6'},
                    {label: '编译成功', value: '316'},
                    {label: '失败', value: '-1'}
                ],
            }
        },
        methods:{
        	scrollContentResize: function(size) {
        		this.tableHeight = size.innerHeight;
        	},
        	getTaskStateLog: function() {
        		var self = this;
        		var filter = JSON.parse(JSON.stringify(this.taskStateLogFilter));
        		filter.pageNum = filter.pageNum - 1;
                axios.get(_contextPath + '/open/datastash/unit/taskstate/all',  {params: filter})
                .then(function (response) {
                    if (response.data) {
                    	var data = response.data;
                    	self.taskStateLog = _.map(data.content, function(item) {
                    		item.taskEventLog = [];
                    		return item;
                    	})
                        self.taskStateLogFilter.total = data.totalElements;
                        self.$nextTick(function() {
                        	self.$refs['scrollContent'].resize();
                        });
                    }
                })
                .catch(function(error) {
                });
        	},
        	getTaskEventLog: function(row, taskProcId) {
        		var _self = this;
        		axios.get(_contextPath + '/open/datastash/unit/taskstate/eventlog',  {
        			params: {
        				taskProcId: taskProcId
        			}
        	    })
                .then(function(response) {
                    if (response.data) {
                    	row.taskEventLog = response.data.content;
                    }
                })
                .catch(function (error) {
                });
        	},
            handleCurrentChange: function(val) {
                this.stateLog.pageNum = val;
                this.getTableData();
            },
            expand: function(row, expanded) {
            	if (expanded) {
            		if (row.taskEventLog.length == 0) {
            			this.getTaskEventLog(row, row.taskProcId);
            		}
            	}
            },
            stateFormatter:function(val) {
                for(var i in this.stateEnum){
                    if( this.stateEnum[i].value==val.state){
                        return this.stateEnum[i].label;
                    }
                }
            },
            turnOverFormatter: function(val) {
                for (var i in this.turnOverEnum) {
                    if (this.turnOverEnum[i].value == val.isTurnover) {
                        return this.turnOverEnum[i].label;
                    }
                }
            },
            taskTypeFormatter: function(val) {
                for (var i in this.taskTypeEnum) {
                    if (this.taskTypeEnum[i].value == val.taskType) {
                        return this.taskTypeEnum[i].label;
                    }
                }
            }
        },
        watch: {
        },
        created: function () {
            this.getTaskStateLog();
        }
    })
</script>
</body>
</html>